<template>
  <div class="alogin">
    <div class="alogin-left"></div>
    <div class="alogin-right">
      <div class="alogin-right-box">
        <div class="title">
          <h1>寻亲</h1>
          <span>后台管理系统</span>
        </div>
        <el-form
          :model="loginForm"
          ref="loginRuleFormRef"
          :rules="loginRules"
          @keydown.enter="adminOnSubmit(loginRuleFormRef)"
        >
          <el-form-item prop="userName" label="账号">
            <el-input v-model="loginForm.userName" placeholder="账号" />
          </el-form-item>
          <el-form-item prop="userPass" label="密码">
            <el-input
              type="password"
              v-model="loginForm.userPass"
              placeholder="密码"
            />
          </el-form-item>
          <el-form-item>
            <div class="btnBox">
              <el-button @click="adminOnSubmit(loginRuleFormRef)"
                >登录</el-button
              >
            </div>
          </el-form-item>
        </el-form>
        <div class="copyright">
          copyright @ 2022zhoushengyue All right reserved
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { useLogin } from "@/hooks/loginForm/useLogin";
//登录hooks
const { loginForm, loginRuleFormRef, loginRules, adminOnSubmit } = useLogin();
</script>

<style lang="less" scoped>
.alogin {
  height: 100vh;
  background: url("@/assets/img/login.webp");
  background-size: 100% 100%;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  &-right {
    // background-color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    &-box {
      background-color: #fff;
      width: 60%;
      box-shadow: 0 0 5px 5px gray;
      padding: 20px 50px;
      border-radius: 10px;
      .title {
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 50px;
        font-style: italic;
        span {
          margin-left: 5px;
          color: gray;
        }
      }
      .btnBox {
        width: 100%;
        display: flex;
        justify-content: center;
        margin-top: 10px;
        .el-button {
          width: 100%;
          background-color: #32cabc;
          color: #fff;
          border-radius: 10px;
        }
      }
      .copyright {
        text-align: center;
        font-size: 12px;
        color: gray;
      }
    }
  }
}
</style>
